<template>
  <div class="LoginPage">
    <img src="../assets/logo.png" class="logo">
    <ul class="info">
      <van-form @submit="onSubmit"> 
        <van-cell-group inset>
          <li>
            <h4>用户名：</h4>
            <van-field
              v-model="form.username"
              name="username"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请输入用户名' }]"
            />
          </li>
          <li>
            <h4>密码：</h4>
            <van-field
              v-model="form.password"
              type="password"
              name="password"
              placeholder="请输入密码码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </li>
          <li>
            <van-button round block type="primary" native-type="submit" :loading="loading" loading-text="登录中...">
              登 录
            </van-button>
          </li>
        </van-cell-group>
      </van-form>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { login } from '@/api/login'; // 导入封装的 API 方法
import { useRouter } from "vue-router"  // 引入useRouter
import { Toast } from 'vant';
export default {
  name: 'App',
  setup() {
    const form = ref({
      username: '',
      password: '',
    });
    const router = useRouter();
    const loading = ref(false);

    const onSubmit = async () => {
      try {
        loading.value = true;
        const data = await login(form.value); // 调用封装的 API 方法
        console.log(data)
        if(data.code == 200){   
          if(data.token){
            localStorage.setItem('token', data.token);
          }
          router.push('/Home'); // 登录成功后跳转到首页
        }else{
          Toast.fail('账号或密码错误，请联系招生处')
        }
      } catch (error) {
        Toast.fail('请求失败:', error);
      } finally {
        loading.value = false;
      }
    };

    return {
      form,
      onSubmit,
      loading,
    };
  },
};
</script>

<style scoped>
  html{
   font-size: 16px;
  }
  *{
    margin: 0;
    padding: 0;
    font-family: 'Alibaba-PuHuiTi-R';
  }
  .LoginPage{
    max-width: 750px;
    height: 100vh;
    background: url(../assets/loginBg.png);
    background-size: cover; /* 背景图覆盖整个容器 */
    background-position: center; /* 背景图居中显示 */
    background-repeat: no-repeat; /* 背景图不重复 */
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
  }
  .logo{
    width: 80%;
    margin: 12rem auto;
  }
  .info{
    width: 70%;
    background: #fff;
    border-radius: 7px;
    box-shadow: 3px 0px 28px 0px #040000;
  }
  ul,li{
    list-style-type: none;
  }
  ul{
    padding: 2rem;
    border-bottom: 1px dashed #E5E5E5;
  }
  h4{
    padding-bottom: 0.625rem;
  }
  li{
    border-bottom: 1px solid #6e6e6e;
    margin-bottom: 1.875rem;
    padding-bottom: 0.312rem ;
  }
  li:last-child{
    border: none;
    margin: 0;
    padding: 0;
  }
  button{
    border-radius: 7px;
    background: #0FB3E8;
    border: none;
    letter-spacing: 3px;
  }
  
 /* 屏幕高度大于 900px 的设备 */
  @media (min-height: 900px) {
    .logo {
       margin: 12rem auto; /* 较小屏幕上下边距 */
    }
  }

  /* 屏幕高度小于 900px 的设备 */
  @media (max-height: 900px) {
    .logo {
       margin: 10rem auto; /* 较小屏幕上下边距 */
    }
  }

   /* 屏幕高度小于 800px 的设备 */
  @media (max-height: 800px) {
    .logo {
       margin: 9rem auto; /* 较小屏幕上下边距 */
    }
  }

  /* 屏幕高度小于 700px 的设备 */
  @media (max-height: 700px) {
    .logo {
      margin: 8rem auto; /* 较小屏幕上下边距 */
    }
  }

  /* 屏幕高度小于 600px 的设备 */
  @media (max-height: 600px) {
    .logo {
      margin: 5rem auto; /* 较小屏幕上下边距 */
    }
  }

  /* 屏幕高度小于 500px 的设备 */
  @media screen and (max-height: 500px) {
    .logo {
      margin: 6rem auto; /* 较小屏幕上下边距 */
    }
  }
</style>